<template>
  <view
    class="page"
    :style="{ 'height': (h-mt) + 'px', 'padding-top': mt + 'px' }"
  >
    <c-nav-bar
      title="实时公交"
      bgColor="transparent"
      :showHome="false"
    ></c-nav-bar>
    <image
      class="bg"
      src="https://i.ringzle.com/file/20240403/8bb25e339a1d475e80bd0dbca360f11a.png"
      mode=""
    >
    </image>

    <!-- 顶部搜索框 -->
    <view class="tosearch">
      <view class="search_left">
        <u-icon name="search" size="36" color="#999999"></u-icon>
        <u-input
          v-model="busListLineQuery.SearchValue"
          type="text"
          placeholder="请输入公交路线"
          font-size="28rpx"
          border="false"
          @confirm="toSearch"
        />
      </view>
      <view class="search_right">
        <view class="line1"></view>
        <text class="searchText" @click="toSearch">搜索</text>
      </view>
    </view>
    <!-- 检索显示 -->
    <view class="showSearch" v-if="busListLineQuery.SearchValue">
      <view
        class="outcome"
        v-for="item in searchList"
        :key="item.Id"
        @click="goDetail(item)"
      >
        <view class="right_topPic">
          <image
            src="https://i.ringzle.com/file/20240122/f5ebbb8706bd4d0897e434e802ecfbd1.png"
            mode=""
          >
          </image>
          <text>{{ item.Name }}</text>
        </view>
        <view class="come_go">
          {{ item.FirstStation }} - {{ item.LastStation }}
        </view>
        <view class="line_outcom"> </view>
      </view>
    </view>
    <!-- 路线信息 -->
    <view class="pathInfo" v-else>
      <view
        class="everyPathInfo"
        v-for="item in busInfoList"
        :key="item.Id"
        @click="goDetail(item)"
      >
        <!-- 线路头 -->
        <view class="everyPathInfo_head">
          <text class="routes">{{ item.Name }}</text>
        </view>
        <!-- 线路中间 -->
        <view class="everyPathInfo_mid">
          <text class="from_place">{{ item.FirstStation }}</text>
          <!-- <u-icon name="arrow-rightward"></u-icon> -->
          <image
            src="https://i.ringzle.com/file/20240122/8d1b3deb460e40e78a23d9761910db77.png"
            mode=""
          >
          </image>
          <text class="to_place">{{ item.LastStation }}</text>
        </view>
        <!-- 线路尾巴 -->
        <view class="everyPathInfo_bottom">
          <view class="first_station">
            <image
              src="https://i.ringzle.com/file/20240125/b4dfae47ee6e4d70a9850931542c4a6b.png"
              mode=""
            >
            </image>
          </view>
          <!-- <text class="se_time">{{item.StartTime/60/60}}:{{item.StartTime/60%60}}</text> -->
          <!-- <text class="se_time">{{item.StartTime/60/60 >= 9 ? item.StartTime/60/60 : '0' + ()item.StartTime/60/60.toFixd(2)}}:{{item.StartTime/60%60 >= 9 ? item.StartTime/60%60 : '0' + item.StartTime/60%60}}</text> -->
          <!-- <text class="se_time">{{item.StartTime/60/60 >= 9 ? (item.StartTime/60/60).toFixed(0) : '0' + (item.StartTime/60/60).toFixed(0)}}:{{item.StartTime/60%60 >= 9 ? (item.StartTime/60%60).toFixed(0) : '0' + (item.StartTime/60%60).toFixed(0)}}</text> -->
          <text class="se_time">{{ item.startTimeStr }}</text>
          <view class="last_station">
            <image
              src="https://i.ringzle.com/file/20240125/229a1d1039c24e5eb7760a4ad3d3f3ee.png"
              mode=""
            >
            </image>
          </view>
          <!-- <text class="se_time">{{lastTime}}</text> -->
          <!-- 		<text class="se_time">{{item.EndTime/60/60 >= 9 ? (item.EndTime/60/60).toFixed(0) : '0' + (item.EndTime/60/60).toFixed(0)}}:{{item.EndTime/60%60 >= 9 ? (item.EndTime/60%60).toFixed(0) : '0' + (item.EndTime/60%60).toFixed(0)}}</text> -->
          <text class="se_time">{{ item.endTimeStr }}</text>
          <text>票价:</text>
          <text>{{ item.Price / 100 }}元</text>
        </view>
      </view>
      <!-- 共计条数 -->
      <view class="busNumber">
        <text>共有{{ busInfoList.length }}条线路</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      toSearchFlag: false,
      title: "实时公交",
      h: uni.getSystemInfoSync().windowHeight,
      mt: uni.getSystemInfoSync().statusBarHeight + 44,
      busInfoList: [],
      leftIconColor: "#000",
      busListLineQuery: {
        Longitude: "",
        Latitude: "",
        Offset: 0,
        Limit: 100,
        Order: "desc",
        SearchValue: "",
      },
      showPath: false,
      searchList: [],
      dataForm: {
        Longitude: "",
        Latitude: "",
        Offset: 0,
        Limit: 100,
        Order: "desc",
      },
    };
  },
  watch: {
    "busListLineQuery.SearchValue": {
      //
      handler(val, oldVal) {
        if (!val) this.searchList = [];
      },
      deep: true, // 深度观察监听 设置为 true
      immediate: true, // 第一次初始化渲染就可以监听到
    },
  },
  onLoad() {
    let opt = wx.getStorageSync("userLocation");
    let commaIndex = opt.indexOf(",");
    // 截取逗号前的数据
    let beforeComma = opt.substring(0, commaIndex);
    this.dataForm.Longitude = beforeComma;
    // 截取逗号后的数据
    let afterComma = opt.substring(commaIndex + 1);
    this.dataForm.Latitude = afterComma;

    this.getStationList();
  },
  methods: {
    toBack(url) {
      if (!url) {
        if (uni.getStorageSync("options")) {
          uni.redirectTo(
            JSON.parse(decodeURIComponent(uni.getStorageSync("options")))
          );
          return uni.removeStorageSync("options");
        }
        let canNavBack = getCurrentPages();
        if (canNavBack && canNavBack.length > 1) uni.navigateBack();
        else
          uni.reLaunch({
            url: "/pages/index/index",
          });
      } else {
        if (this.tabUrls.find((u) => u == url))
          uni.reLaunch({
            url,
          });
        else
          uni.redirectTo({
            url,
          });
      }
    },
    toHome() {
      uni.reLaunch({
        url: "/pages/index/index",
      });
    },
    getStationList() {
      this.$api.post("/api/apibusrealtime/page", this.dataForm).then((res) => {
        if (res.data.code === 0) {
          this.busInfoList = res.data.data.list;
        }
      });
    },
    toSearch() {
      this.$api
        .post("/api/apibusrealtime/searchLineStation", this.busListLineQuery)
        .then((res) => {
          if (res.data.code === 0) {
			  if(res.data.data.list) this.searchList = res.data.data.list;
			  else{
				  this.searchList = [];
				  this.$showToast('未搜索到結果');
			  } 
          }else this.$showModal(res.data.msg);
        });
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pagesIndex/realTimeBus/busRouteInfo?id=${item.Id}&Name=${item.Name}&firstStation=${item.FirstStation}&lastStation=${item.LastStation}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  // padding: 20rpx 24rpx;
  // padding-left: 24rpx;
  // padding-right: 24rpx;
  background-color: #f4f8fa;
  // padding-top: 23rpx;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 468rpx;
  }
}

.newBar {
  // display: flex !important;
  width: 750rpx;
  height: 569rpx;
  background: url("https://i.ringzle.com/file/20240403/8bb25e339a1d475e80bd0dbca360f11a.png")
    repeat-x center;

  .newNewBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 200rpx;
    display: flex !important;
    // align-items: center;
    // background-color: #C9E2FF;
    background-image: url("https://i.ringzle.com/file/20240126/665c69491609440ba80602e4b1cc4aba.png");
    background-size: 100%;

    // background-repeat: no-repeat;
    text {
      margin-top: 150rpx;
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #111;
      // line-height: 176rpx;
      margin-left: 230rpx;
    }

    .gogogoleft {
      margin-top: 150rpx;
      margin-left: 25rpx;
    }
  }
}

.tosearch {
  margin-left: 24rpx;
  width: 702rpx;
  height: 88rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  position: relative;
}

.search_left {
  display: flex;
  width: 560rpx;
  height: 100%;
  margin-left: 24rpx;
}

.search_right {
  flex: 1;
  display: flex;
  align-items: center;
}

.line1 {
  width: 1rpx;
  height: 32rpx;
  background-color: #d1d1d1;
  margin-right: 30rpx;
}

.searchText {
  font-size: 30rpx;
  color: #222;
}

.pathInfo {
  margin-left: 24rpx;
  width: 702rpx;
  margin-top: 20rpx;
  position: relative;
  height: calc(100% - 108rpx);
  overflow-y: auto;
}

.everyPathInfo {
  width: 100%;
  height: 210rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding-top: 30rpx;
  margin-bottom: 20rpx;
  // padding: 30rpx;
}

.everyPathInfo_head {
  // margin-top: 30rpx;
  width: 100%;
  height: 56rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.routes {
  font-size: 40rpx;
  font-weight: 700;
  margin-left: 30rpx;
  color: #222;
}

.stations {
  font-size: 28rpx;
  margin-right: 30rpx;
  color: #333;
}

.everyPathInfo_mid {
  display: flex;
  margin-top: 20rpx;
  margin-left: 10rpx;

  text {
    font-size: 32rpx;
    color: #333;
    margin-right: 20rpx;
    margin-left: 20rpx;
    font-weight: bold;
  }

  image {
    width: 24rpx;
    height: 8rpx;
    margin-top: 15rpx;
  }
}

.everyPathInfo_bottom {
  margin-top: 30rpx;
  margin-left: 30rpx;
  display: flex;
}

.first_station {
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 32rpx;
  height: 32rpx;
  border-radius: 8rpx;
  background-color: #3dc569;
  margin-right: 10rpx;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.se_time {
  font-size: 24rpx;
  font-weight: 400;
  color: #222;
  margin-right: 20rpx;
}

.last_station {
  font-size: 20rpx;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 32rpx;
  height: 32rpx;
  border-radius: 8rpx;
  background-color: #ff7e7e;
  margin-right: 10rpx;

  image {
    width: 32rpx;
    height: 32rpx;
  }
}

.showSearch {
  margin-left: 24rpx;
  width: 702rpx;
  margin-top: 20rpx;
  // margin-left: ;
  // height: 200rpx;
  border-radius: 20rpx;
  background-color: #fff;
  position: relative;
  height: calc(100% - 108rpx);
  overflow-y: auto;
  padding-bottom: 40rpx;
  box-sizing: border-box;

  .outcome {
    padding-top: 30rpx;

    .right_topPic {
      display: flex;
      margin-left: 24rpx;

      image {
        margin-top: 15rpx;
        width: 24rpx;
        height: 24rpx;
        margin-right: 24rpx;
      }

      text {
        font-size: 32rpx;
        font-weight: 700;
        color: #222;
      }
    }
  }
}

.come_go {
  margin-left: 70rpx;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #999;
}

.line_outcom {
  width: 610rpx;
  height: 1rpx;
  background-color: #f2f2f2;
  margin-top: 20rpx;
  margin-left: 68rpx;
}

.busNumber {
  margin-top: 20rpx;
  margin-bottom: 30rpx;
  width: 702rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  text {
    font-size: 32rpx;
  }
}
</style>